/**
 * Created by Adi(adi@imeth.cn) on 2018/9/1.
 */

import React from 'react';
import { Modal, Form, Row, Col, Button } from 'antd';
import PropTypes from 'prop-types';
import { autobind } from 'core-decorators';
import TabsView from 'src/components/tabsView/TabsView';
import {
  Input,
  Tabs,
} from 'antd';

const FormItem = Form.Item;


// 操作视图 (新增、修改、删除)
@Form.create()
@autobind
class OperateModelView extends React.Component {
  static propTypes = {
    operateMode: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // 是否为操作窗口 (新增、修改、删除)
    formData: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
    formItemList: PropTypes.array, //  表单子项
    visible: PropTypes.bool, // 弹窗视图是否显示
    title: PropTypes.string.isRequired, // 弹窗标题
    mask: PropTypes.bool, // 是否遮罩
    maskClosable: PropTypes.bool, // 遮罩是否可操作
    okText: PropTypes.string, // OK按钮显示文本
    zIndex: PropTypes.number,
    onCancel: PropTypes.func, // 取消操作
    onOk: PropTypes.func, // 确认操作
    extra: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]), // 补充渲染
    footerExtra: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]), // 底部渲染的按钮  默认 取消 确认
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // 视图宽度
    onSubmit: PropTypes.func,
    formItemCol: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    tabList: PropTypes.array, // TAB标签专用list
  };

  static defaultProps = {
    operateMode: 'operate',
    zIndex: 1000,
    visible: false,
    mask: true,
    maskClosable: true,
    formItemList: [],
    footerExtra: null,
    width: 700,
    formData: {},
    formItemCol: 12,
    okText: '确认提交',
    tabList: [],
  };

  constructor(props) {
    super(props);
    let { visible } = this.props;
    this.state = {
      visible,
    };
  }

  // react16.3新生命周期 接收props 修改state 返回类似setState()
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.visible === prevState.visible) {
      // 返回Null 不修改state
      return null;
    }
    return {
      visible: prevState.visible,
    };
  }

  render() {
    let {
      visible,
      title,
      okText,
      zIndex,
      extra,
      footerExtra,
      mask,
      maskClosable,
      width,
      operateMode,
    } = this.props;
    footerExtra = operateMode === 'delete' ? undefined : footerExtra;
    return (
      <Modal
        title={title}
        zIndex={zIndex}
        visible={visible}
        centered={true}
        okText={okText}
        onCancel={this._onCancel}
        onOk={this._onOk}
        footer={footerExtra}
        mask={mask}
        maskClosable={maskClosable}
        width={width}
      >
        {operateMode === 'operate' && this.renderOperateView()}
        {operateMode === 'delete' && this.renderDeleteView()}
        {operateMode === 'tab' && this.renderTabView()}
        {extra}
      </Modal>
    );
  }


  renderDeleteView() {
    return <div>确认删除?</div>;
  }

  renderTabView() {

    let { tabList } = this.props;

    // tabList.map((item) => ({ content: this.renderFormItem(item.content) }));

    return (
      <TabsView tabList={tabList}/>
    );
  }

  // 操作弹窗 (新增、修改)
  renderOperateView() {
    let { okText, formItemList } = this.props;
    return (
      <Form onSubmit={event => this._onFormValidate(event)}>
        <Row type="flex" justify="start" align="top">
          {this.renderFormItem(formItemList)}
        </Row>

        <Row type="flex" justify="center" align="middle">
          <Button type="primary" htmlType="submit" style={{ marginRight: '10px' }}>
            {okText}
          </Button>
          <Button onClick={this._onCancel}>取消</Button>
        </Row>
      </Form>
    );
  }

  // 遍历渲染表单子项
  renderFormItem(formItemList) {
    let { form, formItemCol } = this.props;
    let { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    let list = [];
    let col = null;
    let pull = 0;
    let push = 0;
    for (let i = 0; i < formItemList.length; i++) {
      col = formItemList[i].col ? formItemList[i].col : formItemCol;
      pull = formItemList[i].pull ? formItemList[i].pull : pull;
      push = formItemList[i].push ? formItemList[i].push : push;
      list.push(
        <Col span={col} key={i} pull={pull} push={push}>
          <FormItem style={{ display: 'flex' }} label={formItemList[i].label} {...formItemLayout}>
            {getFieldDecorator(formItemList[i].value, {
              rules: formItemList[i].rules,
              initialValue: formItemList[i].initialValue,
            })(formItemList[i].renderItem)}
          </FormItem>
        </Col>,
      );
    }
    return list;
  }

  // 表单校验
  // 赋值
  _onFormValidate(event) {
    event.preventDefault();
    const { form } = this.props;
    // 表单校验
    form.validateFields((error, formValues) => {
      if (error) return;
      // 赋值表单
      this.setState({ formValues }, () => this._onSubmit());
    });
  }

  // 提交表单操作
  _onSubmit() {
    let { formValues } = this.state;
    let { onSubmit, formData } = this.props;
    // 合并数据 (当前表单数据可能无法包含全部数据，需合并)
    formValues = Object.assign({}, formData, formValues);
    onSubmit && onSubmit(formValues);
  }

  // 取消操作
  _onCancel() {
    let { onCancel, form } = this.props;
    onCancel && onCancel();
    // 重置表单
    form.resetFields();
    this.setState({ visible: false, formValues: {} });
  }

  _onOk() {
    let { onOk } = this.props;
    onOk && onOk();
  }
}

export default OperateModelView;
